<template>
	<view class="flex-col page">
		<view class="flex-col self-stretch">
			<MyHeader title="创建地址"></MyHeader>
			<view class="flex-col section_4">
				<view class="flex-row items-center group_2">
					<text class="font">联系人</text>
					<input class="font_2 ml-21" type="text" placeholder="请填写收货人姓名" />
				</view>
				<view class="flex-row group_3">
					<text class="font text" style="margin-right: 42rpx;">性别</text>
					<uni-data-checkbox v-model="formInfo.sexValue" :localdata="sex"></uni-data-checkbox>
					<!--          <view class="ml-40 flex-row items-center">
            <image
              class="shrink-0 image_7"
              src="https://ide.code.fun/api/image?token=6775281b797f850011f50bd4&name=da0c135884791448e2f9cbae85a83821.png"
            />
            <text class="ml-12 font_3 text_2">先生</text>
          </view> -->
					<!-- <view class="ml-40 flex-row items-center">
            <view class="shrink-0 section_5"></view>
            <text class="font_3 text_3 ml-11">女士</text>
          </view> -->
				</view>
				<view class="flex-row items-center group_4">
					<text class="font text_4">手机号</text>
					<input class="font_2 ml-21" type="text" placeholder="请填写收货手机号码" />
				</view>
				<view class="flex-row justify-between items-center group_4">
					<view class="flex-row items-baseline">
						<text class="font text_5">地址</text>
						<text class="font_2 text_6 ml-37">点击选择</text>
					</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
				<view class="flex-row items-center group_4">
					<text class="font">门牌号</text>
					<input class="font_2 ml-21" type="text" placeholder="例如：B座15楼1206室" />
				</view>
			</view>
		</view>
		<view class="flex-col justify-start items-center self-center text-wrapper">
			<text class="font text_8">保存</text>
		</view>
		<view class="self-stretch section_6"></view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	const sex = ref([{
		text: '男',
		value: 0
	}, {
		text: '女',
		value: 1
	}])
	const formInfo = ref({
		sexValue: []
	})
</script>

<style scoped>
	.ml-5 {
		margin-left: 10rpx;
	}

	.ml-11 {
		margin-left: 22rpx;
	}

	.ml-37 {
		margin-left: 74rpx;
	}

	.ml-21 {
		margin-left: 42rpx;
	}

	.page {
		background-color: #f7f8fa;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.section {
		padding: 36rpx 12rpx 42rpx 34rpx;
		background-image: linear-gradient(180deg, #4c8eef 0%, #84bbd900 100%);
	}

	.group {
		padding: 0 16rpx;
	}

	.image {
		width: 34rpx;
		height: 22rpx;
	}

	.image_2 {
		width: 30rpx;
		height: 22rpx;
	}

	.image_3 {
		width: 48rpx;
		height: 22.66rpx;
	}

	.image_4 {
		width: 18rpx;
		height: 34rpx;
	}

	.section_2 {
		padding: 12rpx 24rpx;
		background-color: #ffffff99;
		border-radius: 50rpx;
		height: 64rpx;
		border-left: solid 1rpx #97979733;
		border-right: solid 1rpx #97979733;
		border-top: solid 1rpx #97979733;
		border-bottom: solid 1rpx #97979733;
	}

	.image-wrapper {
		width: 38rpx;
	}

	.image_6 {
		width: 38rpx;
		height: 14rpx;
	}

	.section_3 {
		background-color: #33333333;
		width: 1rpx;
		height: 37rpx;
	}

	.image_5 {
		width: 34rpx;
		height: 34rpx;
	}

	.section_4 {
		margin: 0 30rpx;
		padding: 4rpx 24rpx 40rpx;
		background-color: #ffffff;
		border-radius: 19.06rpx;
	}

	.group_2 {
		padding: 32rpx 16rpx;
	}

	.font {
		font-size: 32rpx;
		font-family: SourceHanSansCN;
		line-height: 29.6rpx;
		color: #333333;
	}

	.font_2 {
		font-size: 28rpx;
		font-family: SourceHanSansCN;
		line-height: 25.92rpx;
		color: #cccccc;
	}

	.group_3 {
		padding: 32rpx 16rpx;
		border-top: solid 1rpx #e5e5e5;
		border-bottom: solid 1rpx #e5e5e5;
	}

	.text {
		line-height: 29.56rpx;
	}

	.image_7 {
		width: 30rpx;
		height: 30rpx;
	}

	.font_3 {
		font-size: 28rpx;
		font-family: SourceHanSansCN;
		line-height: 25.92rpx;
		color: #333333;
	}

	.text_2 {
		line-height: 25.9rpx;
	}

	.section_5 {
		background-color: #ffffff;
		border-radius: 50%;
		width: 32rpx;
		height: 32rpx;
		border-left: solid 2rpx #cccccc;
		border-right: solid 2rpx #cccccc;
		border-top: solid 2rpx #cccccc;
		border-bottom: solid 2rpx #cccccc;
	}

	.text_3 {
		line-height: 26.02rpx;
	}

	.group_4 {
		padding: 32rpx 16rpx;
		border-bottom: solid 1rpx #e5e5e5;
	}

	.text_4 {
		line-height: 29.44rpx;
	}

	.text_5 {
		line-height: 28.7rpx;
	}

	.text_6 {
		line-height: 25.82rpx;
	}

	.image_8 {
		margin-right: 4rpx;
		width: 14rpx;
		height: 26rpx;
	}

	.text_7 {
		line-height: 26.06rpx;
	}

	.text-wrapper {
		margin-top: 164rpx;
		padding: 28rpx 0;
		background-color: #4c8eef;
		border-radius: 56rpx;
		width: 578rpx;
	}

	.text_8 {
		color: #ffffff;
		line-height: 29.72rpx;
	}

	.section_6 {
		margin-top: 592rpx;
		background-color: #ffffff;
		height: 68rpx;
	}
</style>